<!--
 * @Description: 流程节点配置
 * @Author: zhailei
 * @Date: 2021-01-18 15:17:26
 * @LastEditTime: 2021-09-16 10:27:07
 * 
 * @FilePath: \vite-demoe:\wwwroot\Vue\\-cloud-vue\src\components\TopVUI\bpmn\panel\NodePropertyPanel.vue
-->
<template>
  <div class="padding-lr-xs">
    <a-form
      v-if="!~['bpmn:CallActivity', 'bpmn:SubProcess'].indexOf(formData.type)"
    >
      <template
        v-if="formData.type == 'bpmn:UserTask' && formDesinType === 'custom'"
      >
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="外置表单"
        >
          <a-input-search
            placeholder="表单页面路径"
            v-model="formDesignUrl"
            @search="
              () => {
                externalFormVisible = true;
              }
            "
          >
            <a-button slot="enterButton" type="primary">
              选择
            </a-button>
          </a-input-search>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="保存接口"
        >
          <a-input
            v-model="nodeFormSavePathUrl"
            placeholder="表单保存接口地址"
          ></a-input>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="详情接口"
        >
          <a-input
            v-model="formDesignDetailUrl"
            placeholder="表单详情接口地址"
          ></a-input>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="更新接口"
        >
          <a-input
            v-model="nodeFormUpdatePathUrl"
            placeholder="表单更新接口地址"
          ></a-input>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="表单可编辑"
        >
          <a-checkbox v-model="formData.formEditable"></a-checkbox>
        </a-form-item>
      </template>
    </a-form>
    <!-- 表单 -->
    <external-form
      :visible.sync="externalFormVisible"
      @ok="handleChangeForm"
    ></external-form>
  </div>
</template>

<script>
import conditions from "./modal/conditions.vue";
import processUser from "./modal/processUser.vue";
import externalForm from "./modal/externalForm.vue";
export default {
  name: "FormSetting",
  components: {
    conditions,
    processUser,
    externalForm,
  },
  data() {
    return {
      labelCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 7,
        },
      },
      wrapperCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 17,
        },
      },
      externalFormVisible: false, //外置表单
      visible: false,
      btnGroup: [],
      btnList: [],
      multiInstanceVisible: false,
      eventDefinitions: [],
      signalVisible: false,
      refType: "",
      conditionVisible: false,
      extensionElements: [],
      formDesignUrl: "",
      formDesignDetailUrl: "",
      nodeFormUpdatePathUrl: "",
      nodeFormSavePathUrl: "",
    };
  },
  props: {
    modeler: {
      type: Object,
      required: true,
    },
    nodeElement: {
      type: Object,
      required: true,
    },
    formData: {
      type: Object,
      required: true,
    },
    formDesinType: {
      type: String,
    },
  },
  watch: {
    nodeElement: {
      deep: true,
      immediate: true,
      handler(newVal, oldVal) {
        const bpmnModeler = this.modeler;
        const modeling = bpmnModeler.get("modeling");
        const businessObject = newVal.businessObject;
        this.formDesignUrl = businessObject?.formDesignUrl;
        this.formDesignDetailUrl = businessObject?.formDesignDetailUrl;
        this.nodeFormUpdatePathUrl = businessObject?.nodeFormUpdatePathUrl;
        this.nodeFormSavePathUrl = businessObject?.nodeFormSavePathUrl;
        if (newVal.type == "bpmn:UserTask" || newVal.type == "bpmn:EndEvent") {
          this.btnGroup = businessObject.btnGroup
            ? JSON.parse(businessObject.btnGroup)
            : [];
        }
        if (this.nodeElement.type == "bpmn:StartEvent") {
          this.updateName("开始");
        }
        if (this.nodeElement.type == "bpmn:EndEvent") {
          this.updateName("结束");
        }
      },
    },
    "formData.async": function(val) {
      if (val === "") val = null;
      this.updateProperties({
        "flowable:async": val,
      });
      this.$emit("setFormBtnData", "async", val);
    },
    "formData.isForCompensation": function(val) {
      if (val === "") val = null;
      this.updateProperties({
        isForCompensation: val,
      });
      this.$emit("setFormBtnData", "isForCompensation", val);
    },
    "formData.ruleVariablesInput": function(val) {
      if (val === "") val = null;
      this.updateProperties({
        "flowable:ruleVariablesInput": val,
      });
      this.$emit("setFormBtnData", "ruleVariablesInput", val);
    },
    "formData.rules": function(val) {
      if (val === "") val = null;
      this.updateProperties({
        "flowable:rules": val,
      });
      this.$emit("setFormBtnData", "rules", val);
    },
    "formData.resultVariable": function(val) {
      if (val === "") val = null;
      this.updateProperties({
        "flowable:resultVariable": val,
      });
      this.$emit("setFormBtnData", "resultVariable", val);
    },
    "formData.exclude": function(val) {
      if (val === "") val = null;
      this.updateProperties({
        "flowable:exclude": val,
      });
      this.$emit("setFormBtnData", "exclude", val);
    },
    "formData.autoStoreVariables": function(val) {
      if (val === "") val = null;
      this.updateProperties({
        "flowable:autoStoreVariables": val,
      });
      this.$emit("setFormBtnData", "autoStoreVariables", val);
    },
    "formData.triggerable": function(val) {
      if (val === "") val = null;
      this.updateProperties({
        "flowable:triggerable": val,
      });
      this.$emit("setFormBtnData", "triggerable", val);
    },
    "formData.skipExpression": function(val) {
      if (val === "") val = null;
      this.updateProperties({
        "flowable:skipExpression": val,
      });
      this.$emit("setFormBtnData", "skipExpression", val);
    },
    formDesignUrl: function(val) {
      if (val === "") val = null;
      this.updateProperties({
        formDesignUrl: val,
      });
      this.$emit("setFormBtnData", "formDesignUrl", val);
      this.changeFormModuleBtn();
    },
    formDesignDetailUrl: function(val) {
      if (val === "") val = null;
      this.updateProperties({
        formDesignDetailUrl: val,
      });
      this.$emit("setFormBtnData", "formDesignDetailUrl", val);
      this.changeFormModuleBtn();
    },
    nodeFormUpdatePathUrl: function(val) {
      if (val === "") val = null;
      this.updateProperties({
        nodeFormUpdatePathUrl: val,
      });
      this.$emit("setFormBtnData", "nodeFormUpdatePathUrl", val);
      this.changeFormModuleBtn();
    },
    nodeFormSavePathUrl: function(val) {
      if (val === "") val = null;
      this.updateProperties({
        nodeFormSavePathUrl: val,
      });
      this.$emit("setFormBtnData", "nodeFormSavePathUrl", val);
      this.changeFormModuleBtn();
    },
    "formData.formModuleType": function(val) {
      if (val === "") val = null;
      this.updateProperties({
        formModuleType: val,
      });
      this.$emit("setFormBtnData", "formModuleType", val);
    },
    "formData.formEditable": function(val) {
      if (val === "") {
        val = null;
      } else {
        val = Number(val);
      }
      this.updateProperties({
        formEditable: val,
      });
      this.$emit("setFormBtnData", "formEditable", val);
      this.changeFormModuleBtn();
    },
  },
  methods: {
    // 选择外置表单
    handleChangeForm(val) {
      if (val.length > 0) {
        this.formDesignUrl = val[0].nodeFormPath;
        this.formDesignDetailUrl = val[0].nodeFormEditPath;
        this.nodeFormUpdatePathUrl = val[0].nodeFormUpdatePath;
        this.nodeFormSavePathUrl = val[0].nodeFormSavePath;
        this.externalFormVisible = false;
      } else {
        this.$message.warn("请选择需要配置的表单！");
      }
    },
    updateProperties(properties) {
      this.modeler
        .get("modeling")
        .updateProperties(this.nodeElement, properties);
    },
    updateName(name) {
      this.updateProperties({
        name: name,
      });
    },
  },
};
</script>

<style lang="less" scoped="scoped"></style>
